<template>
	<!-- 垃圾分类 -->
	<view class="wasteClass">
		<!-- 头部图片 -->
		<view class="wasteClass-header">
			<image src="../../static/images/swiper/waste2.jpg" mode=""></image>
		</view>
		<!-- 顶部滑块 -->
		<scroll-view scroll-x="true" class="wasteScroll" :scroll-into-view="scrollIntoIndex">
			<view class="slider" v-for="(item,index) in topbar" :key="index" @tap="changTab(index)" :id="'top'+index">
				<text :class='tabbarIndex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<!-- 滑块对应内容 -->
		<swiper class="recyclable-swiper" :style="'height:'+recyclableHeight+'rpx;'" :current="tabbarIndex"
			@change="onChangeTab">
			<!-- 可回收 -->
			<swiper-item>
				<view style="height: 100%;" v-if="clableList.length==0">
					<none></none>
				</view>
				<view class="recyclable" v-else>
					<!-- 左侧导航栏 -->
					<view class="left">
						<leftGroup :clableList="clableList" @clableMainhandle="handleChildEvent"></leftGroup>
					</view>
					<!-- 右侧分类列表 -->
					<view class="right">
						<view class="recyclable-main">
							<view class="boxStyle"></view>
							<view class="classMain">
								<view class="classMain-box" v-for="(item,index) in clableMainList" :key="index">
									<view class="classMain-image">
										<image :src="item.pic_url" mode=""></image>
									</view>
									<view class="classMain-text">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<!-- 不可回收 -->
			<swiper-item>
				<view style="height: 100%;" v-if="unclableList.length==0">
					<none></none>
				</view>
				<view class="recyclable" v-else>
					<!-- 左侧导航栏 -->
					<view class="left">
						<!-- 左侧导航栏 -->
						<leftGroup :clableList="unclableList" @clableMainhandle="handleChildEvent"></leftGroup>
					</view>
					<!-- 右侧分类列表 -->
					<view class="right">
						<view class="recyclable-main">
							<view class="boxStyle"></view>
							<view class="classMain">
								<view class="classMain-box" v-for="(item,index) in unclableMainList" :key="index">
									<view class="classMain-image">
										<image :src="item.pic_url" mode=""></image>
									</view>
									<view class="classMain-text">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<tabBar currentPage="classification"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/component/commen/tabbar.vue" //引入底部组件
	import $http from "@/component/commen/api/request.js"; //引入封装的请求 
	import none from "@/otherPages/none/none.vue"
	import leftGroup from "@/component/leftGroup.vue" //左侧导航栏组件
	export default {
		components: {
			tabBar,
			none,
			leftGroup
		},
		data() {
			return {
				topbar: [ //顶部滑块的文字内容
					{
						id: 0,
						name: "可回收"
					},
					{
						id: 1,
						name: "不可回收"
					}
				],
				tabbarIndex: 0, //选中的索引
				scrollIntoIndex: "top0", //顶栏跟随的索引id
				navHeight: 0, //导航栏高度
				recyclableHeight: 0, //滑块对应内容高度
				clableList: [], //导航栏列表(可回收)
				leftIndex: 0, //左侧导航栏选中的索引(可回收)
				leftScrollIntoIndex: "index0", //跟随的索引id(可回收)
				clableMainList: [], //右侧商品数据(可回收)
				unclableList: [], //不可回收导航栏列表
				unclableMainList: [], //不可回收商品数据
				unleftIndex: 0, //左侧导航栏选中的索引(不可回收)
				unleftScrollIntoIndex: "index0", //跟随的索引id(不可回收)
			};
		},
		mounted() {
			this.getsystemInfo()
			this.geticationList()
		},
		methods: {
			changTab(e) { //点击头部滑块切换
				// console.log(e)
				if (this.tabbarIndex === e) { //当前页
					return;
				}
				this.tabbarIndex = e
				this.scrollIntoIndex = "top" + e
			},
			onChangeTab(e) {
				// console.log(e)
				this.changTab(e.detail.current)
			},
			handleChildEvent(value) {
				// console.log(value)
				// 当 'child-event' 事件被触发时，更新父组件中的 receivedValue
				if (this.tabbarIndex == 0) { //可回收
					this.clableMainList = value;
				} else { //不可回收
					this.unclableMainList = value
				}

			},
			getsystemInfo() { //获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				// console.log(sysInfo)
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				let windowHeight = sysInfo.windowHeight * scaleFactor
				// 滑块对应内容高度=屏幕高度-底部tabbar高度:120rpx-头部图片：210rpx-顶部滑块：80rpx
				this.recyclableHeight = windowHeight - 120 - 210 - 80
				// 当前机型屏幕宽度
				let windowWidth = sysInfo.windowWidth * scaleFactor
				// 状态栏高度
				let statusBarHeight = (sysInfo.statusBarHeight) * scaleFactor
				// 导航栏高度(ps:只针对微信小程序有效)
				// let navHeight = 0
				// 微信小程序头部胶囊信息
				// #ifdef MP-WEIXIN
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
				// 胶囊高度
				let menuButtonHeight = menuButtonInfo.height * scaleFactor
				// 胶囊宽度
				let menuButtonWidth = menuButtonInfo.width * scaleFactor
				// 胶囊上边界的坐标
				let menuButtonTop = menuButtonInfo.top * scaleFactor
				// 胶囊右边界的坐标
				let menuButtonRight = menuButtonInfo.right * scaleFactor
				// 胶囊下边界的坐标
				let menuButtonBottom = menuButtonInfo.bottom * scaleFactor
				// 胶囊左边界的坐标
				let menuButtonLeft = menuButtonInfo.left * scaleFactor
				// 微信小程序：导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
				// console.log(this.navHeight)
				// 
				// #endif
			},
			geticationList() { //获取数据
				$http({ //获取可回收数据
					url: "?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=cateList&m=wjyk_recycle&sign=c07205597d8e6079a939e4242d3577cd&type=1",
					method: "get"
				}).then((res) => {
					// console.log(res)
					this.clableList = res.data
					this.clableMainList = this.clableList[0].children
					console.log(this.clableMainList)
				})
				$http({ //获取不可回收数据
					url: "?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=cateList&m=wjyk_recycle&sign=192fb9268633c10346daff7528f02a22&type=2",
					method: "get"
				}).then((res) => {
					// console.log(res)
					this.unclableList = res.data
					this.unclableMainList = this.unclableList[0].children
					console.log(this.clableMainList)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wasteClass {
		// background: #fff;
		margin-bottom: 120rpx;
		box-sizing: border-box;

		.wasteClass-header {
			// border: 1px solid #f00;
			background: #fff;

			image {
				width: 100%;
				height: 210rpx;
			}
		}

		// 顶部滑块
		.wasteScroll {
			width: 100%;
			height: 80rpx;
			white-space: nowrap;
			background: #fff;

			// box-shadow: #e3e3e3 0 0 8px;
			.slider {
				box-sizing: border-box;
				display: inline-block;
				// border: 1px solid #000;
				width: 50%;
				text-align: center;
				padding: 10rpx 30rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				box-sizing: border-box;
				padding: 10rpx 0;
				border-bottom: 6rpx solid #4fc3a5;
				color: #4fc3a5;
			}

			.f-color {
				// color: #ccc;
			}

			// .scrollItem-left{
			// 	height:100%;
			// }
		}

		// 滑块对应的内容
		.recyclable-swiper {
			// margin-top: 1vh;
			// height: 100vh;
			// 头部图片：210rpx+顶部滑块：80rpx
			// border: 1px solid #000;
			box-sizing: border-box;

			.recyclable {
				//可回收部分
				box-sizing: border-box;
				display: flex;
				height: 2048rpx;

				.left {
					width: 25%;

					.recyclable-left {
						font-size: 27rpx;
						text-align: center;
						box-sizing: border-box;
						// padding-top: 2vh;
						width: 100%;
						height: 100%;
						padding-top: 20rpx;

						// border: 1px solid #000;
						.clable-text {
							padding: 20rpx 0;
							// border: 1px solid #f00;
						}

						.csreindex {
							//当前选中样式
							background: #fff;
							color: #4fc3a5;
						}
					}
				}

				.right {
					width: 75%;

					.recyclable-main {
						box-sizing: border-box;
						height: 100%;

						.boxStyle {
							//给盒子设置颜色渐变
							height: 30rpx;
							background: linear-gradient(#f7f7f7, #fff);
						}

						.classMain {
							background: #fff;
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							display: flex;
							flex-wrap: wrap;
							// border: 1px solid #f00;
							// justify-content: space-around;
							align-content: flex-start;

							.classMain-box {
								// border: 1px solid #000;
								margin: 0 30rpx;
								width: 22.5%;
								height: 200rpx;

								.classMain-image {
									width: 100rpx;
									height: 100rpx;
									margin: 0 auto;

									image {
										width: 100rpx;
										height: 100rpx;
										border-radius: 25px;
										margin-bottom: 10rpx;
										box-sizing: border-box;
									}
								}

								.classMain-text {
									font-size: 27rpx;
									text-align: center;
								}
							}
						}
					}
				}
			}
		}
	}
</style>